<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <script src="../node_modules/@vue/runtime-dom/dist/runtime-dom.global.js"></script>

  <body>
    <div id="app"></div>
  </body>
  <script>
    let { reactive, createApp, h } = VueRuntimeDOM;

    const VueComponent = {
      setup(props, { slots }) {
        console.log(slots);
        return () => {
          return h("div", [
            h("div", slots.default()),
            h("div", slots.header()),
            h("div", slots.main()),
            h("div", slots.footer()),
          ]);
        };
      },
    };

    let app = createApp({
      render: () => {
        return h(VueComponent, null, {
          default: () => {
            return h("a", "default");
          },
          header: () => {
            return h("a", "hello");
          },
          main: () => {
            return h("a", "vue");
          },
          footer: () => {
            return h("a", "hulei");
          },
        });
      },
    });
    app.mount("#app");
  </script>
</html>
